<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>

      <div class="con-wrap">
        <div class="content clearfix">
          <ul class="con-left">
            <li class="mine">个人中心</li>



            <li v-for="(item,index) in arr" :class="'con-left-li'+(index+1)" @click="change((index))">
              <span class="con-tit">{{item.tit}}</span>
              <span class="con-tit2">></span>
              <ul class="con-child" v-show="item.show" @click.stop>
                <router-link :to="item1.name" v-for="item1 in item.arr1" >
                  <li>{{item1.txt}}</li>
                </router-link>
              </ul>
            </li>

          </ul>
          <div class="con-right clearfix">
            <router-view></router-view>
          </div>
        </div>
      </div>


      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Nav2 from '../com/Nav2'
  import Footer from '../com/Footer'
  import Myaccount from './Myaccount'
  import Info from './Info'

    export default {
        name: "Mine",
      components:{
        Nav,
        Nav2,
        Footer,
        Myaccount,
        Info
      },
      data(){
          return{
            com:'/myaccount',
            arr:[
              {tit:'交易管理',show:false,
                arr1:[
                  {name:'/myaccount',txt:'我的账户'},
                  {name:'/myorder',txt:'我的订单'},
                  {name:'/myintegral',txt:'我的积分'},
                  {name:'/pointsOrders',txt:'积分订单'},
                  {name:'/chongzhi',txt:'我的钱包'},
                ]
              },
              {tit:'会员资料',show:false,
                arr1:[
                  {name:'/info',txt:'个人资料'},
                  {name:'/address',txt:'地址管理'},
                  {name:'/collect',txt:'我的收藏'},
                  {name:'/',txt:'最近浏览'},
                  {name:'/changepwd',txt:'修改密码'},
                ]
              },
              {tit:'站内信',show:false,
                arr1:[
                  {name:'/mymessage',txt:'我的消息'},
                  {name:'/feedback',txt:'意见反馈'},
                ]
              },
            ],
          }
      },
      methods:{
        change(i){
          this.arr[i].show = !this.arr[i].show;
        },

      },


    }
</script>

<style scoped>
  .con-wrap{
    width: 100%;
  }
  .content{
    width: 1280px;
    /*height: 623px;*/
    padding-top: 40px;
    padding-bottom: 47px;
    margin: 0 auto;
  }
  .con-left{
    float: left;
    width: 168px;
    height: 623px;
    border: 1px solid #e7e7e7;
  }
  .con-left li{
    cursor: pointer;
  }
  .mine{
    width: 128px;
    height: 18px;
    padding: 20px;
    color: #666666;
    font-size:18px;
    border-bottom:1px solid #e7e7e7;
  }

  .con-left-li1{
    width: 128px;
    /*height: 194px;*/
    padding:20px 20px 0;
  }
  .con-left-li2{
    width: 128px;
    /*height: 220px;*/
    padding:0 20px;
  }
  .con-left-li3{
    width: 128px;
    /*height: 90px;*/
    padding:0 20px;
  }
  .con-tit{
    display: inline-block;
    font-size: 16px;
    width: 90px;
    height: 36px;
  }
  .con-tit2{
    font-size: 16px;
  }

  .con-child{
    width: 128px;
  }
  .con-child li{
    width: 128px;
    height: 36px;
    font-size: 14px;
    color: #999999;
  }
  .con-child .li2{
    color: #579b4a;
    text-decoration: underline;
  }

  .con-right{
    float: right;
    width: 1085px;
    /*height: 625px;*/
  }
</style>
